import React from 'react';
import { Order } from '../../types';
import { Clock, Package } from 'lucide-react';

interface DispenserQueueProps {
  pendingOrders: Order[];
}

export function DispenserQueue({ pendingOrders }: DispenserQueueProps) {
  return (
    <div className="bg-white p-4 rounded-lg shadow-md mt-4">
      <h2 className="text-xl font-bold mb-4">待处理订单队列</h2>
      
      <div className="max-h-[35rem] overflow-y-auto">
        <div className="space-y-3">
          {pendingOrders.length === 0 ? (
            <p className="text-gray-500 text-center py-4">暂无待处理订单</p>
          ) : (
            pendingOrders.map(order => (
              <div key={order.orderNumber} className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div className="flex items-center gap-3">
                  <Package className="text-blue-500" size={20} />
                  <div>
                    <p className="font-medium">订单 #{order.orderNumber}</p>
                    <div className="flex items-center gap-1 text-sm text-gray-500">
                      <Clock size={14} />
                      {order.date.toLocaleString()}
                    </div>
                  </div>
                </div>
                <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">
                  待处理
                </span>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}
